<template>
  <div class="baoquan">
       <div class="kT">开拓热力</div>
    <div class="jingkai"  @click="saveDialogVisible = true">
                <div class="dotted"></div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
              </div>
    <el-dialog :visible.sync="saveDialogVisible" width="1800px"  top="66px">
      <div class="banner">
        <div class="left scrollBar">
          <div class="search">
            <img src="../assets/images/开拓.png" alt />
          </div>
          <div class="text">
            <h1>北京博大开拓热力有限公司</h1>
            <p>北京亦庄投资控股有限公司（以下简称“亦庄控股”）是1992年经北京市委、市政府批准成立的市属国有企业。公司注册资本188亿元，总资产676亿元，下属全资、控股、参股、代管企业42家。</p>
            <p>经过28年的实践，亦庄控股逐步构建起“科技产业投资促进、科技创新成果转化、产业新城开发建设、智慧城市运营服务、城市公共服务保障”五大业务板块，创造性地探索出产业新城运营管理的全产业链模式。产业服务和产业促进能力成为亦庄控股面向市场的核心竞争力，公司相继建成产业园区、定制厂房、特色楼宇、创新科学园等24个产业促进平台，承载科技创新企业超过2000家，其中“世界500强”企业21家，上市公司40家。</p>
            <p>作为首都全国科技创新中心“三城一区”建设的重要载体，亦庄控股将始终致力于首都南部产业新城建设，为打造特色鲜明、管理卓越、高效运行、跨越发展，具有国际视野、一流水准的现代化、集团化、专业化产业新城运营商而不懈奋斗！</p>
            <p>地址：北京经济技术开发区荣华南路9号院1号楼(亦城科技中心1号楼) </p>
            <p>邮编：100176 </p>
            <p>电话：010-67882212 </p>
            <p>传真：010-67882551</p>
            <p>E-MAIL：BDAGROUP@BDAGROUP.COM.CN</p>
          
          </div>
        </div>
        <div class="right scrollBar">
          <div class="search">
            <div class="content_middle" style="position: relative;">
              <div class="company">
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round1">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">监督单位</div>
                          <div style="font-size:22px">128</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round2">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">监督对象</div>
                          <div style="font-size:22px">1246</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round">
                    <div class="round3">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">监察对象</div>
                          <div style="font-size:22px">2268</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex:1;text-align: center;position: relative;">
                  <img src="../assets/images/circle_run.png" class="img_run" />
                  <div class="round" @click="saveDialogVisible = true">
                    <div class="round4">
                      <div class="round5">
                        <div style="color:white;height:104px;transform: translateY(28px);">
                          <div style="font-size:16px">保全总量</div>
                          <div style="font-size:22px">645</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="contain">
              <div class="lianzheng">
                <img src="../assets/images/廉政.png" alt class="imgyi" />
                <div class="box">
                  <ul>
                    <li class="first">
                      <span>姓名</span>
                      <span>职务</span>
                    </li>
                    <li v-for="item in list" :key="item.id">
                      <span>{{item.name}}</span>
                      <span>{{item.duty}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="company1">
                <img src="../assets/images/公司.png" alt class="imgyi" />
                <div class="box">
                  <ul>
                    <li class="first">
                      <span>年份</span>
                      <span>档案名称</span>
                    </li>
                    <li v-for="item in company" :key="item.id">
                      <span>{{item.name}}</span>
                      <span>{{item.duty}}</span>
                    </li>
                  </ul>
                </div>
              </div>
                <div class="sangong">
                 <img src="../assets/images/三公.png" alt="" class="imgyi">
                  <div class="box">
                  <ul>
                    <li class="first">
                      <span>金额(元)</span>
                      <span>科目</span>
                        <span>支出时间</span>
                    </li>
                    <li v-for="item in three" :key="item.id">
                      <span>{{item.money}}</span>
                      <span>{{item.course}}</span>
                         <span>{{item.date}}</span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="xinfang">
                 <img src="../assets/images/信访.png" alt="" class="imgyi">
                 <div class="box">
                  <ul>
                    <li class="first">
                      <span>举报标题</span>
                      <span>被举报人</span>
                    </li>
                    <li v-for="item in letter" :key="item.id">
                      <span>{{item.duty}}</span>
                      <span>{{item.name}}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 保全总量
      saveDialogVisible: false,
      // 保全编号
      name: "",
      region: "",
      // 保全时间
      date: "",
      // 廉政
      list: [
        { name: "刘泽仁", duty: "科长" },
        { name: "李旺", duty: "局长" },
        { name: "王丽", duty: "处长" },
        { name: "林东", duty: "科长" },
        { name: "李艾", duty: "局长" },
        { name: "李文静", duty: "处长" },
      ],
      company: [
        { name: "2020年", duty: "1.班子民主生活会材料" },
        { name: "2019", duty: "2.年度工作总结" },
        { name: "2020", duty: "1.班子民主生活会材料" },
        { name: "2019", duty: "2.年度工作总结" },
        { name: "2020", duty: "2.年度工作总结" },
        { name: "2019", duty: "1.班子民主生活会材料" },
      ],
      three: [
        { money: "2,300.00", course: "汽车使用费用", date: "2020-02-03" },
        { money: "4,560.37", course: "业务招待费", date: "2020-02-03" },
        { money: "8,631.13", course: "汽车使用费用", date: "2020-02-03" },
        { money: "4,371.31", course: "业务招待费", date: "2020-02-03" },
        { money: "7,862.15", course: "汽车使用费用", date: "2020-02-03" },
        { money: "2,155.69", course: "汽车使用费用", date: "2020-02-03" },
      ],
      letter: [
        { name: "李珍妮", duty: "占用公司的办公出租金，收租金" },
        { name: "刘泽仁", duty: "刘泽仁滥用公费的举报" },
        { name: "孙中园", duty: "占用公司的办公出租金收租金的服务…" },
        { name: "白丽丽", duty: "占用公司的办公出租金收租金的服务…" },
        { name: "刘秋高", duty: "刘秋高滥用公费的举报" },
        { name: "魏大雨", duty: "占用公司的办公出租金收租金的服务…" },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__header {
  background: url("../assets/images/公司简介.png") #000080 !important;
  background-position: 20px !important;
  background-repeat: no-repeat !important;
  position: relative;
  padding: 81px 20px 10px 30px;
  box-sizing: border-box;
  width: 100%;
}
/deep/.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  background: url(../assets/images/bg.png);
  background-repeat: repeat !important;
  height:800px !important;
}

.banner {
   width: 1760px;
  height:800px !important;
 padding: 30px 2px 30px 0;
  background: url("../assets/images/框1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 70px;
  display: flex;
  
}
.left {
  width: 540px;
   height: 720px;
  border-right: 2px solid #0a46f2;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  overflow-y: auto;
}
.right {
  width: 1174px;
  height: 720px;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.search {
  flex: 1;
  text-align: center;
  margin-top: 46px;
}
.text {
  margin-top: 41px;
  padding: 0 52px;
  box-sizing: border-box;
}
.text h1 {
  width: 392px;
  height: 40px;
  font-size: 28px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
}
.text p {
  text-align: left;
  text-indent: 2em;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  line-height:32px;
}

.round {
  width: 138px;
  height: 138px;
  border-radius: 50%;
  padding: 5px;
  border: 1px solid #0a46f2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.round1 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(185, 22, 242, 1) 100%
  );
}
.round2 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(77, 184, 156, 1) 100%
  );
}
.round3 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(22, 61, 242, 1) 100%
  );
}
.round4 {
  margin: auto;
  margin-top: 5px;
  padding-top: 12px;
  border-radius: 50%;
  width: 128px;
  height: 116px;
  background: linear-gradient(
    270deg,
    rgba(4, 196, 252, 1) 0%,
    rgba(96, 91, 247, 1) 100%
  );
}
.round5 {
  margin: auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgb(11, 18, 138);
}
@keyframes turnAround {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.img_run {
  animation: turnAround 4s linear infinite;
}
.company {
  display: flex;
  flex: 25%;
  justify-content: space-between;
}
.kuang {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url();
}
.contain {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 73px;
}
.lianzheng {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.company1 {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.sangong {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.xinfang {
  width: 530px;
  height: 408px;
  margin-bottom: 49px;
  background: url(../assets/images/框2.png);
}
.box ul li {
  width: 496px;
  height: 49px;
  display: flex;
  justify-content: space-around;
}
ul li:nth-child(odd) {
  background: #020B8A;
}
ul {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.box ul li span {
  width: 200px;
  height: 49px;
  font-size: 19px;
  font-weight: 400;
  color: white;
  line-height: 49px;
  overflow: hidden;
}

.box .first span {
  color: #3cdfff;
}
.imgyi {
  margin-top: -17px;
}
// 动画
.jingkai {
  position: absolute;
  left: 280px;
  top: -710px;
  color: #fff;
}
.dotted {
  width: 8px;
  height: 8px;
  background-color: #06ffff;
  border-radius: 50%;
}
.jingkai div[class^="pulse"] {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px #06ffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: pulse 1.2s linear infinite;
}

.jingkai div.pulse2 {
  animation-delay: 0.4s;
}

.jingkai div.pulse3 {
  animation-delay: 0.8s;
}

@keyframes pulse {
  0% {
  }

  70% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }

  100% {
    width: 60px;
    height: 60px;
    opacity: 0;
  }
}
.kT {
  position: absolute;
  left: 320px;
  top: -720px;
  color: #fff;
  width: 80px;
  height: 28px;
  font-size: 20px;
}
</style>